<!--
 * @Description: 
 * @Author: 吴冠然
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: 何梦龙
 * @LastEditTime: 2022-05-16 22:46:37
-->
<template>

  <div>
    <!--我的页面背景-->
  <div class="header">admin1</div>  
  <div class="zhanghuyue">账户余额</div>
  <div class="qian">7437.5</div>
  
    <!--透明长方形-->
    <div class="swipe-div">
  <div class="ab"></div>
    </div>
    <!--充值按钮-->
    <div class="chongzhituxing"></div>
    <div class="chongzhi">充值</div>
   
   <!--常用地址和联系我们方框-->
   <div class="changyongdizhi">常用地址</div>
   <div class="fangkuang"></div>
   <div class="fangkuang1"></div>
  <div class="lianxiwomen">联系我们</div>
  <!--小箭头-->
  <div class="jiantou"></div>
  <div class="jiantou1"></div>
   
 
  <!--退出登录-->
  <div class="tuichudenglutuxing"></div>
<div class="tuichudenglu" @click="$router.push('../Login')">退出登录</div>

    <!--加载图片-->
    <img class="photo"
  src="http://121.199.29.84:8888/group1/M00/00/22/rBD-SWCvayiAFxbEAACkVLvvWi0588.jpg"
  alt="">

   

    <button class="button" @click="$router.push('address')"></button>
  </div>
</template>

<script>
// import {Login} from "@/views/Login.vue";
export default {
  data() {
    return {
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style scoped>
.header {
  /* div默认的宽是100%，整个屏幕的宽 */
  height: 180px;
  /* 渐变背景 */
  background-image: linear-gradient(to right, #7579ff, #bf73ff);
  /* 设置圆角边框 */
  border-radius: 0 0 50% 50%;
   /* 文字颜色 */
  color: #000000;
  /* 文字大小 */
  font-size: 16px;
  /* 文字对齐方式 */
  text-align: center;
  /* 文字行高 */
  line-height: 300px;
  /* 文字粗细 */
  font-weight: 100;

}
.zhanghuyue{
    /* 文字颜色 */
  color: #3b3a3a;
  /* 文字大小 */
  font-size: 16px;
  /* 文字对齐方式 */
position:absolute;
  left: 360px;
  top: 191px;
  /* 文字粗细 */
  font-weight: 100;
}
.qian{
   /* 文字颜色 */
  color: #7579ff;
  /* 文字大小 */
  font-size: 22px;
  /* 文字对齐方式 */
position:absolute;
  left: 358px;
  top: 216px;
  /* 文字粗细 */
  font-weight: 100;
  
}

.swipe-div {
width: 85%;
/*div水平居中*/
margin: 0 auto;
/* 透明矩形往上提 */
margin-top: -95px;

}
 .ab{
    width: 1092px;
    height: 170px;
    
    /* 透明矩形圆角边框 */
border-radius: 10px;
/* 设置透明度 */
     opacity:0.45;
filter:alpha(opacity=45);
background:rgb(230, 227, 227);
     border-radius: 10px;
 }
.chongzhi{
  /* 文字颜色 */
  color: #ffffff;
  /* 文字大小 */
  font-size: 13px;
  /* 文字对齐方式 */
position:absolute;
  left: 915px;
  top: 213px;
  /* 文字粗细 */
  font-weight: 500;
  
}
.chongzhituxing{
  width: 58px;
  height: 44px;
    /* 渐变背景 */
  background-image: linear-gradient(to right, #7579ff, #bf73ff);
   /* 设置圆角边框 */
  border-radius: 45% 45% 45% 45%;
  /* 充值图形位置 */
  position:absolute;
  left: 900px;
  top: 200px;

  
}
.tuichudenglu{
   
   /* 文字颜色 */
  color: #ffffff;
  /* 文字大小 */
  font-size: 16px;
  /* 文字对齐方式 */
  position:absolute;
  left: 615px;
  top:460px;
  /* 文字粗细 */
  font-weight: 100;

}
.tuichudenglutuxing{
   width: 799px;
  height: 40px;
    /* 渐变背景 */
  background-image: linear-gradient(to right, #7579ff, #bf73ff);
   /* 设置圆角边框 */
  /* border-radius: 25% 25% 25% 25%; */
  border-radius: 25px;
  /* 充值图形位置 */
  position:absolute;
  left: 250px;
  top: 450px;

}
.fangkuang{
   width: 1200px;
  height: 44px;
  position:absolute;
  left: 30px;
  top: 315px;
   border-style:solid;
  border-top-color:#f1eded;
  border-left-color: #f1eded;
  border-right-color: #e1e2fa;
  border-bottom-color:#ededf1 

}
.fangkuang1{
   width: 1200px;
  height: 44px;

  position:absolute;
  left: 30px;
  top: 358px;
  border-style:solid;
  border-top-color:#fffdfd ;
   border-left-color: #f1eded;
  border-right-color: #e1e2fa;
  border-bottom-color:#e1e2fa ;
}
.lianxiwomen{
   /* 文字颜色 */
  color: #000000;
  /* 文字大小 */
  font-size: 16px;
  /* 文字对齐方式 */
  position:absolute;
  left: 65px;
  top:373px;
  /* 文字粗细 */
  font-weight: 100;

}
.changyongdizhi{
     /* 文字颜色 */
  color: #000000;
  /* 文字大小 */
  font-size: 16px;
  /* 文字对齐方式 */
  position:absolute;
  left: 65px;
  top:330px;
  /* 文字粗细 */
  font-weight: 100;

}

.photo{
  width: 95px;
  height: 95px;
  position:absolute;
  left:590px;
  top:30px;
  border-radius:50%;
  
}
.button{
  width: 1204px;
  height: 48px;
  position:absolute;
  left: 30px;
  top: 315px;
  border-style:solid;
  border-top-color:#f1eded;
  border-left-color: #f1eded;
  border-right-color: #e1e2fa;
  border-bottom-color:#ededf1;
  /* 设置透明度 */
     opacity:0.05;
filter:alpha(opacity=45);
background:rgb(255, 255, 255);
     border-radius: 10px;
}
.jiantou{
  border-top: 5px solid rgb(92, 82, 82);

            border-right: 5px solid rgb(92, 82, 82);

            transform: rotate(45deg);

            width: 10px;

            height: 10px;
            position:absolute;
            left: 1200px;
            top:333px;


}
.jiantou1{
  border-top: 5px solid rgb(92, 82, 82);

            border-right: 5px solid rgb(92, 82, 82);

            transform: rotate(45deg);

            width: 10px;

            height: 10px;
            position:absolute;
            left: 1200px;
            top:375px;

}
</style>